<template>
  <el-row style="padding: 16px">
      <el-col :span="20">
        <BaseForm ref="formRef" label-width="100px" :form-list="formList" :form-data="formData"
          :direction="direction" />
      </el-col>
      <el-col style="margin-left: 100px">
        <el-button type="warning" @click="handleToggleDirection">
          {{ direction == "row" ? "竖向" : "横向" }}
        </el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
</template>


<script>
// 初始化查询条件
function getFormValue(arr) {
  if (!Array.isArray(arr)) {
    return;
  }
  let obj = {};
  arr.forEach((item) => {
    if (item.key) {
      obj[item.key] = item.defaultValue || "";
    }
  });
  return obj;
}

export default {
  data() {
    return {
      formList: [
        {
          label: "名称",
          valueType: "input",
          key: "name",
          itemSpan: 8,
          rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
        },
        {
          label: "地址",
          valueType: "input",
          key: "address",
          itemSpan: 8,
          remark: "请输入详细地址，否则可能发生未知错误",
        },
        {
          label: "日期",
          valueType: "date-picker",
          key: "date",
          itemSpan: 8,
          fieldProps: {
            type: "date",
          },
        },
        {
          label: "标签",
          labelWidth: "100px",
          valueType: "select",
          key: "tag",
          itemSpan: 8,
          options: [
            {
              label: "家",
              value: 1,
            },
            {
              label: "公司",
              value: 2,
            },
          ],
          fieldProps: {
            clearable: true,
          },
        },
        {
          label: "联动下拉框",
          valueType: "select",
          key: "selectValue",
          itemSpan: 8,
          options: [],
        },
        {
          label: "购买数量",
          valueType: "input-number",
          key: "buyNumber",
          itemSpan: 8,
          fieldProps: {
            min: 3,
          },
        },
      ],
      formData: {},
      direction: "row",
    };
  },
  watch: {
    "formData.tag"(value) {
      this.tagChange(value)
    }
  },
  created() {
    this.formData = getFormValue(this.formList);
  },
  methods: {
    tagChange(val) {
      const arr1 = [
        { label: "label1", value: 1 },
        { label: "label2", value: 2 },
      ];
      const arr2 = [{ label: "label3", value: 3 }];
      let list = [];
      if (val === 1) {
        list = arr1;
      } else if (val === 2) {
        list = arr2;
      }
      this.formList[4].options = list;
      console.log('this.formList[4]: ', this.formList[4]);
      this.formData.selectValue = "";
    },
    handleToggleDirection() {
      this.direction = this.direction == "row" ? "column" : "row";
    },
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log("this.formData: ", this.formData);
        }
      });
    },
    handleReset() {
      this.$refs.formRef.resetFields();
    },
  },
};
</script>

<style>

</style>